<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>折线图</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'))

    const xData = ['1月', '2月', '3月', '4月', '5月', '6月']
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: 'ECharts 折线图示例'
      },
      tooltip: {},
      label: {},
      legend: {
        data: ['销量', '库存']
      },
      xAxis: {
        type: 'category',
        data: xData,
        boundaryGap: false // 紧挨边缘：第一个元素紧挨y轴
      },
      yAxis: {
        type: 'value',
        scale: true // 缩放：脱离0值比例
      },
      series: [
        {
          name: '销量',
          type: 'line',
          data: [15, 18, 17, 16, 18, 17],
          // 最大最小值
          markPoint: {
            data: [{
                type: 'max',
              },
              {
                type: 'min',
              }
            ],
          },
          // 标注线
          markLine: {
            data: [{
              type: 'average',
            }]
          },
          // 标注区域
          markArea: {
            data: [
              // 区间一
              [{
                  xAxis: '1月' // 开始值
                },
                {
                  xAxis: '2月' // 结束值
                }
              ],
              // 区间二
              [{
                  xAxis: '5月'
                },
                {
                  xAxis: '6月'
                }
              ],
            ],
          },
          // 线条平滑
          smooth: true,
          // 线条样式
          lineStyle: {
            color: 'green',
            type: 'dashed',
          },
          // 填充风格
          areaStyle: {
            color: 'red',
          },
          // 堆叠图：同一stack数值累加
          stack: 'all',
        },
        {
          name: '库存',
          type: 'line',
          data: [19, 16, 18, 15, 17, 18],
          areaStyle: {},
          // 堆叠图：同一stack数值累加
          stack: 'all',
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>